<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
		<title>大唐微科集团</title>
		<link rel="shortcut icon" href="assets/img/icon.png">
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
		<link rel="stylesheet" type="text/css" href="assets/css/green.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
		<link rel="stylesheet" href="assets/css/slicknav.css" />
		<link rel="stylesheet" href="assets/css/Element-ui.css" />
		<link rel="stylesheet" href="assets/css/swiper.min.css" />
		<style type="text/css">
			#app{
				margin:auto;
				width:90%;
				margin-left:5%;
				float: left;
			}
			.el-carousel__container img{
				display: block;
				width:100%;
			}
			#carousel-area i{
				margin-right: 0;
			}
			#county_op_img img{
				margin:27px 5%;
			}
			@media only screen and (min-width: 320px) and (max-width: 480px) {
				.el-pagination.is-background .el-pager li {
				    margin: 0 2px;
				}
				.el-carousel__indicator {
				    padding: 4px 7px;
				}
				.el-carousel__button{
					width:7px;
					height:7px;
				}
				.bottom_color {
				     padding-top: 0; 
				}
			}
			.swiper-container {
		        width: 100%;
		        height: 190px;
		    }
		    .swiper-slide {
		    	height: 0;
		        text-align: center;
		        font-size: 18px;
		        background: #fff;
		        display: -webkit-box;
		        display: -ms-flexbox;
		        display: -webkit-flex;
		        display: -webkit-box;
		        -webkit-box-pack: center;
		        -ms-flex-pack: center;
		        -webkit-justify-content: center;
		        justify-content: center;
		        -webkit-box-align: center;
		        -ms-flex-align: center;
		        -webkit-align-items: center;
		        align-items: center;
		    }
		</style>
	</head>

	<body>
		<header id="header-wrap"></header>
		<div id="app" v-cloak>
			<!--<div class="banner_img">
				<img src="assets/img/banner_bg.png"/>
			</div>-->
			<!--center-->
			<section id="about" class="section">
				<!--集团简介-->
				<div class="team-all about_team">
					<div class="about_border_bottom"> 
						<div class="introduction_left" ref='bannerHeight'>
							<div class="" id="company_nav_tit">
								<div class="section-title wow fadeInUpQuick">
									<a href="index.html" class="a_hover">
										<img src="assets/img/home.png" />&nbsp;&nbsp;首页&nbsp;
									</a><i class="el-icon-arrow-right"></i>&nbsp;<a class="a_hover" href="newdd.html">产业布局</a>
									<i class="el-icon-arrow-right"></i>&nbsp;<span style="color:#003793;">{{countyListCentent.classifiedsName}}</span>
								</div>
							</div>
							<!--县链惠--------------------------------------------------------------------------->
							<div class="introduction_centent" v-if="countyListCentent.videoUrl == 'showForth'">
								<p class="centetn_tit">{{countyListCentent.newsTitle}}</p>
								<img :src="countyListCentent.newsCover" id="introdu_img"/>
								<p class="centetn_tit county_op" id="county_op_img" v-html="countyListCentent.newsContent"></p>
							</div>
							<!--大河优选--------------------------------------------------------------------------->
							<div class="introduction_centent revitalization" v-if="countyListCentent.videoUrl == 'showThird'">
								<div class="revitali_div">
									<div class="revitali_left_div">
										<p class="revitali_one_p">{{countyListCentent.newsTitle}}</p>
										<p class="revitali_one_centent" v-html="countyListCentent.newsContent"></p>
									</div>
									<div class="revitali_right_img">
										<img :src="countyListCentent.newsCover"/>
									</div>
								</div>
								<!--业务模块-->
								<div class="revitali_two_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">业务模块</li>
										<li class="revitali_li"></li>
									</ul>
									<dl class="optimi_dl" v-for="item in countyListModule" v-if="item.videoUrl == 'first'">
										<dt class="optimi_dt">
											<img :src="item.newsCover"/>
										</dt>
										<dd class="optimi_dd">{{item.newsTitle}}</dd>
									</dl>
								</div>
								<!--门店实拍-->
								<div class="revitali_three_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">门店实拍</li>
										<li class="revitali_li"></li>
									</ul>
									<ul class="Tianguan_ul optimi_img">
										<li class="Tianguan_li" v-for="item in countyListModule" v-if="item.videoUrl == 'second'">
											<img :src="item.newsCover"/>
										</li>
									</ul>
								</div>
							</div>
							<!--河南天灌-------------------------------------------------------------------------->
							<div class="introduction_centent revitalization" v-if="countyListCentent.videoUrl == 'showSecond'">
								<div class="revitali_div">
									<div class="revitali_left_div">
										<p class="revitali_one_p">{{countyListCentent.newsTitle}}</p>
										<p class="revitali_one_centent" v-html="countyListCentent.newsContent"></p>
									</div>
									<div class="revitali_right_img">
										<img :src="countyListCentent.newsCover"/>
									</div>
								</div>
								<!--经营定位-->
								<div class="revitali_two_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">经营定位</li>
										<li class="revitali_li"></li>
									</ul>
									<div v-for="item in countyListModule" v-if="item.videoUrl == 'seveno'">
										<div class="Tianguan_div">
											<img :src="item.newsCover"/>
										</div>
										<div class="Tianguan_right_centent">
											<p class="Tianguan_right_op">{{item.profile}}</p>
										</div>
									</div>
								</div>
								<!--产品展示-->
								<div class="revitali_three_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">产品展示</li>
										<li class="revitali_li"></li>
									</ul>
									
									<div class="swiper-container">
								        <div class="swiper-wrapper Tianguan_ul">
								            <div class="swiper-slide Tianguan_li" v-for="item in countyListModule" v-if="item.videoUrl == 'eight'">
								            	<img :src="item.newsCover"/>
								            </div>
								        </div>
								   </div>
									<!--<ul class="Tianguan_ul">
										<li class="Tianguan_li" v-for="item in countyListModule" v-if="item.videoUrl == 'eight'">
											<img :src="item.newsCover"/>
										</li>
									</ul>-->
								</div>
								<!--厂区风貌-->
								<div class="revitali_three_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">厂区风貌</li>
										<li class="revitali_li"></li>
									</ul>
									<ul class="Tianguan_ul cqfm_ul">
										<li class="Tianguan_li" v-for="item in countyListModule" v-if="item.videoUrl == 'nine'">
											<img :src="item.newsCover"/>
										</li>
									</ul>
								</div>
							</div>
							<!--乡村振兴--------------------------------------------------------------------------->
							<div class="introduction_centent revitalization" v-if="countyListCentent.videoUrl == 'showFirst'">
								<div class="revitali_div">
									<div class="revitali_left_div">
										<p class="revitali_one_p">{{countyListCentent.newsTitle}}</p>
										<p class="revitali_one_centent" v-html="countyListCentent.newsContent"></p>
									</div>
									<div class="revitali_right_img">
										<img :src="countyListCentent.newsCover"/>
									</div>
								</div>
								<!--公共服务-->
								<div class="revitali_two_div">
									<ul class="revitali_ul">
										<li class="revitali_li" :class="{first_revitail_li:0 == currentable}" @click="btn_table(0,'five')">公共服务</li>
										<li class="revitali_li" :class="{first_revitail_li:1 == currentable}" @click="btn_table(1,'six')">美丽乡村</li>
										<li class="revitali_li"></li>
									</ul>
									<dl class="revitali_two_dl" v-for="item in countyListModule" v-if="item.videoUrl == 'five'" v-show="ShowFive">
										<dt class="revitali_two_dt">
											<img :src="item.newsCover"/>
										</dt>
										<dd class="revitali_two_dd">
											<p class="revitali_two_p">{{item.newsTitle}}</p>
											<p class="revitali_two_op">{{item.profile}}</p>
										</dd>
									</dl>
									<dl class="revitali_two_dl" v-for="item in countyListModule" v-if="item.videoUrl == 'six'" v-show="ShowSix">
										<dt class="revitali_two_dt">
											<img :src="item.newsCover"/>
										</dt>
										<dd class="revitali_two_dd">
											<p class="revitali_two_p">{{item.newsTitle}}</p>
											<p class="revitali_two_op">{{item.profile}}</p>
										</dd>
									</dl>

								</div>
								<!--农业科技-->
								<div class="revitali_three_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">农业科技</li>
										<li class="revitali_li"></li>
									</ul>
									<div class="revitali_three_img" v-for="item in countyListModule" v-if="item.videoUrl == 'third'">
										<img :src="item.newsCover"/>
									</div>
								</div>
								<!--农人培训-->
								<div class="revitali_three_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">农人培训</li>
										<li class="revitali_li"></li>
									</ul>
									<dl class="revitali_fouce_dl" v-for="item in countyListModule" v-if="item.videoUrl == 'fourth'">
										<dt class="revitali_fouce_dt">
											<img :src="item.newsCover"/>
										</dt>
										<dd class="revitali_fouce_dd revitali_two_dd">
											<p class="revitali_fouce_p revitali_two_p">{{item.newsTitle}}</p>
											<p class="revitali_fouce_op revitali_two_op_phen">{{item.profile}}</p>
										</dd>
									</dl>
								</div>
							</div>
							<!--中视山河---------------------------------------------------------------------------------->
							<div class="introduction_centent revitalization" v-if="countyListCentent.videoUrl == 'showSix'">
								<div class="revitali_div">
									<div class="revitali_left_div">
										<p class="revitali_one_p">{{countyListCentent.newsTitle}}</p>
										<p class="revitali_one_centent" style="font-weight: 300;" v-html="countyListCentent.newsContent"></p>
									</div>
									<div class="revitali_right_img">
										<img :src="countyListCentent.newsCover"/>
									</div>
								</div>
								<!--业务模块-->
								<div class="revitali_two_div">
									<ul class="revitali_ul">
										<li class="revitali_li first_revitail_li">服务范围</li>
										<li class="revitali_li"></li>
									</ul>
									<div class="ctv_div">
										<div class="ctv_left">
											<p class="ctv_small">SCOPE  OF</p>
											<p class="ctv_big">SERVICES</p>
											<p class="ctv_border"></p>
											<p class="ctv_tit">服务范围</p>
										</div>
										<ul class="ul_ctv">
											<li class="li_ctv" v-for="(item,index) in countyListModule" v-if="item.videoUrl == 'elevnt'">
												<p><img :src="item.newsCover"/></p>
												<p>{{item.newsTitle}}</p>
												<p>{{item.engLish.toUpperCase()}}</p>
												<ul class="mounth_ul">
													<div class="mounth_li">
														<li class="mounth_div">
															<span class="mounth_span"></span>
															<span class="mounth_tit">{{item.profile.substring(0,20)}}</span>
														</li>
														<li class="mounth_div">
															<span class="mounth_span"></span>
															<span class="mounth_tit">{{item.profile.substring(20,item.profile.length)}}</span>
														</li>
													</div>
												</ul>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<!--右侧-->
						<div class="introduction_right">
							<div class="introdu_topImg">
								<img src="assets/img/pt.png"/>
								<div class="topImg_right">共创·共建·共赢·共享</div>
							</div>
							<ul class="right_ulList" :style="{height:UlHeight - 97 + 'px'}">
								<li class="li_List" v-for="(item,index) in liIndustInfo" @click="rightBtn(item.id,index)" :class="{List_active:index == current}">{{item.classifiedsName}}</li>
							</ul>
						</div>
					</div>
					<!--底部边框颜色-->
					<div class="bottom_color">
						<div class="left_color"></div>
						<div class="right_color"></div>
					</div>
				</div>
			</section>
		</div>
		<script type="text/javascript" src="assets/js/jquery-min.js"></script>
		<script type="text/javascript" src="assets/js/conent.js"></script>
		<script type="text/javascript" src="assets/js/vue.js" ></script>
		<script type="text/javascript" src="assets/js/vue-resource.js" ></script>
		<script type="text/javascript" src="assets/js/swiper.min.js" ></script>
		<!--<script type="text/javascript" src="assets/js/Element-ui.js" ></script>-->
		<script type="text/javascript">
			function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
				var r = window.location.search.substr(1).match(reg);
				if(r != null) {
					return decodeURI(r[2])
				}
				return null;
			}
			//ID
			var contentId = getQueryString("countyId");
			//页面下标
			var contentNumber = getQueryString('countyIndex');
			
			var vm = new Vue({
				el:'#app',
				data(){
					return{
						UlHeight : '',
						countyListCentent : '',
						countyListModule : '',
						liIndustInfo : '',
						current : 0,
						ShowFive : '',
						ShowSix : '',
						currentable : 0
					}
				},
				created(){
					this.CountyInfo(contentId,contentNumber);
					this.rightInfoList();
					this.btn_table(0,'five')
				},
				methods:{
					CountyInfo(id,index){
						var _this = this;
						this.$http.get(URL + 'queryClassifiedId/' + id).then(function(obj){
							console.log(obj)
							if(obj.body.code == 'success'){
								if(obj.body.data.length > 0){
									_this.countyListCentent = obj.body.data[1].singObject;
									//模块部分
									_this.countyListModule = obj.body.data[0].dataList;
									_this.current = index;
									setTimeout(function(){
										_this.$nextTick(function(){
											_this.UlHeight = this.$refs.bannerHeight.offsetHeight;
										})
									},300)
								}
							}
						})
					},
					//美丽乡村、公共服务  列表切换
					btn_table(index,value){
						var _this = this;
						if(value == 'five'){
							_this.ShowFive = true;
							_this.ShowSix = false;
							_this.currentable = index
						}else if(value == 'six'){
							_this.ShowSix = true;
							_this.ShowFive = false;
							_this.currentable = index
						}
					},
					//右侧列表
					rightInfoList(){
						var _this = this;
						this.$http.get(URL + 'externalclassifies').then(function(data){
							if(data.body.code == 'success'){
								if(data.body.data.length > 0){
									_this.liIndustInfo = data.body.data
								}
							}
						})
					},
					//右侧点击事件
					rightBtn(id,index){
						this.CountyInfo(id,index)
					}
				},
				updated(){
					$(".li_ctv").hover(function(){
						$(this).find('ul').animate({
							bottom : '0px'
						},"slow")
					},function() {
						$(this).find('ul').animate({
							bottom : '-110px'
						},"slow")
					})
					setTimeout(function() {
						$("#main-menu li a").removeClass("active");
						$("#main-menu li:nth-of-type(" + 3 + ") a").addClass('active');
					},300)
					var swiper = new Swiper('.swiper-container', {
				        pagination: '.swiper-pagination',
				        slidesPerView:4,
				        paginationClickable: true,
				        spaceBetween: 30,
				        freeMode: true
				    });
				}
			})
			setTimeout(function() {
				var wow = new WOW({
					mobile: false 
				});
				wow.init();
			},300)
			
		</script>
		<script type="text/javascript" src="assets/js/wow.js" ></script>
		<!--底部-->
		<footer id="footer"></footer>
		<a href="#" class="back-to-top">
			<i class="fa fa-angle-up">
				<span class="i_span"></span>
			</i>
		</a>
		<script type="text/javascript" src="assets/js/Top.js"></script>
	</body>

</html>